<template>
  <div class="main-container">
    <!-- 侧边栏目录 -->
    <aside class="sidebar">
      <h2>目录</h2>
      <div class="sidebar-content">
        <div v-for="(volume, volumeIndex) in fullVolumes" :key="volumeIndex" class="volume-sidebar">
          <h3 @click="toggleVolume(volumeIndex)" class="volume-title-sidebar">
            {{ volume.title }} <span :class="['toggle-icon', { active: isVolumeOpen[volumeIndex] }]">▼</span>
          </h3>
          <ul v-if="isVolumeOpen[volumeIndex]" class="chapter-list-sidebar">
            <li v-for="(chapter, chapterIndex) in volume.chapters" :key="chapterIndex" class="chapter-item-sidebar">
              <RouterLink :to="getChapterRoute(chapterIndex + 1)">
                {{ chapter }}
              </RouterLink>
            </li>
          </ul>
        </div>
      </div>
    </aside>

    <!-- 主内容区 -->
    <div class="book-container">
      <button class="back-button" @click="goBack">返回</button>

      <!-- 书籍封面展示 -->
      <div class="book-cover">
        <img src="@/assets/img/santi-cover.jpg" alt="三体全集封面" class="cover-image">
      </div>

      <!-- 书籍基本信息 -->
      <div class="book-info">
        <h1 class="title">《三体全集》</h1>
        <div class="metadata">
          <p class="author">刘慈欣 著</p>
          <p class="publisher">重庆出版社</p>
          <p class="isbn">ISBN: 978-7-5366-9293-0</p>
        </div>
      </div>

      <!-- 书籍简介 -->
      <section class="synopsis">
        <h2>内容简介</h2>
        <p class="description">
          《三体》是刘慈欣创作的系列长篇科幻小说，讲述了地球人类文明和三体文明的信息交流、生死搏杀及两个文明在宇宙中的兴衰历程...
        </p>
      </section>

      <!-- 分卷展示 -->
      <div class="volumes">
        <div v-for="(volume, volumeIndex) in volumes" :key="volumeIndex" class="volume-card">
          <h3 class="volume-title">{{ volume.title }}</h3>
          <ul class="chapter-list">
            <li v-for="(chapter, chapterIndex) in volume.chapters" :key="chapterIndex" @click="selectChapter(volumeIndex, chapterIndex)"
                class="chapter-item">
              {{ chapter }}
            </li>
          </ul>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="action-buttons">
        <RouterLink to="/book01/santi-book01" target="_blank">
          <button class="purchase-btn">开始阅读</button>
        </RouterLink>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 新增返回方法
const goBack = () => {
  router.push("/") // 返回首页
}

// 完整章节列表
const fullVolumes = [
  {
    title: '三体Ⅰ：地球往事',
    chapters: [
      '科学边界', '台球', '射手和农场主', '三体、周文王、长夜', '叶文洁',
      '宇宙闪烁', '大史', '三体、墨子、烈焰', '红岸之二', '红岸之三',
      '红岸之四', '三体、哥白尼、宇宙橄榄球、三日凌空', '三体问题',
      '三体、牛顿、冯·诺依曼、秦始皇、三日连珠', '聚会', '三体、爱因斯坦、单摆、大撕裂',
      '三体、远征', '地球叛军', '红岸之五', '红岸之六', '叛乱',
      '雷志成、杨卫宁之死', '无人忏悔', '伊文斯', '第二红岸基地',
      '地球三体运动', '两个质子', '古筝行动', '监听员', '智子',
      '虫子', '尾声、遗址', '后记'
    ]
  },
  {
    title: '三体Ⅱ：黑暗森林',
    chapters: [
      '序章', '上部 面壁者 第2节', '上部 面壁者 第3节', '上部 面壁者 第4节', '上部 面壁者 第5节',
      '上部 面壁者 第6节', '上部 面壁者 第7节', '上部 面壁者 第8节', '上部 面壁者 第9节',
      '上部 面壁者 第10节', '上部 面壁者 第11节', '上部 面壁者 第12节', '上部 面壁者 第13节',
      '上部 面壁者 第14节', '上部 面壁者 第15节', '中部 咒语 第1节 危机纪年第8年，三体舰队距太阳系2.7光年',
      '中部 咒语 第2节', '中部 咒语 第3节', '中部 咒语 第4节', '中部 咒语 第5节',
      '中部 咒语 第6节 危机纪年第12年，三体舰队距太阳系1.8光年', '中部 咒语 第7节',
      '中部 咒语 第8节', '中部 咒语 第9节 危机纪年第20年，三体舰队距太阳系1.3光年',
      '中部 咒语 第10节', '中部 咒语 第11节', '中部 咒语 第12节', '中部 咒语 第13节',
      '下部 黑暗森林 第1节 危机纪年第205年，三体舰队距太阳系4.3光年',
      '下部 黑暗森林 第2节', '下部 黑暗森林 第3节', '下部 黑暗森林 第4节',
      '下部 黑暗森林 第5节', '下部 黑暗森林 第6节', '下部 黑暗森林 第7节',
      '下部 黑暗森林 第8节', '下部 黑暗森林 第9节', '下部 黑暗森林 第10节',
      '下部 黑暗森林 第11节', '下部 黑暗森林 第12节', '下部 黑暗森林 第13节',
      '下部 黑暗森林 第14节', '下部 黑暗森林 第15节', '下部 黑暗森林 第16节',
      '下部 黑暗森林 第17节', '下部 黑暗森林 第18节', '下部 黑暗森林 第19节',
      '下部 黑暗森林 第20节 危机纪年第208年，三体舰队距太阳系3光年',
      '下部 黑暗森林 第21节',
      '《黑暗森林》与刘慈欣的新古典主义预言——评《三体Ⅱ：黑暗森林》',
      '人类应该向刘慈欣致敬——《三体Ⅱ：黑暗森林》'
    ]
  },
  {
    title: '三体Ⅲ：死神永生',
    chapters: [
      '心事浩渺连广宇', '第一部 《时间之外的往事》序言（节选）', '第一部 纪年对照表',
      '第一部 第一节【公元1453年5月，魔法师之死】', '第一部 第二节【危机纪元元年，生命选项】',
      '第一部 第三节【危机纪元4年，云天明】· 1', '第一部 第三节【危机纪元4年，云天明】· 2',
      '第一部 第四节【危机纪元1 - 4年，程心】· 1', '第一部 第四节【危机纪元1 - 4年，程心】· 2',
      '第一部 第四节【危机纪元1 - 4年，程心】· 3', '第一部 第五节【危机纪元5 - 7年，阶梯计划】',
      '第二部 第一节【威慑纪元12年，"青铜时代"】', '第二部 第二节【威慑纪元13年，审判】',
      '第二部 第三节【威慑纪元61年，执剑人】· 1', '第二部 第三节【威慑纪元61年，执剑人】· 2',
      '第二部 第三节【威慑纪元61年，执剑人】· 3', '第二部 第四节【威慑纪元62年，奥尔特星云外，"青铜时代"】',
      '第二部 第五节【威慑纪元62年11月28日16:00至22:00，"青铜时代"】', '第二部 第六节【威慑纪元最后十分钟，62年11月28日23:58至24:00，太阳系】',
      '第二部 第七节【威慑后一小时，失落的世界】', '第二部 第八节【威慑后六十天，失落的世界】',
      '第二部 第九节【威慑后第一年，澳大利亚】· 1', '第二部 第九节【威慑后第一年，澳大利亚】· 2',
      '第二部 第十节【威慑纪元最后十分钟，62年11月28日23:58至24:00，太阳系】',
      '第二部 第十一节【威慑后第一年，移民完成后的地球】',
      '第二部 第十二节【威慑后第一天至第五天，奥尔特星云】',
      '第三部 第一节【广播纪元7年，程心】', '第三部 第二节【广播纪元7年，智子】· 1',
      '第三部 第二节【广播纪元7年，智子】· 2', '第三部 第三节【广播纪元7年，云天明】· 1',
      '第三部 第三节【广播纪元7年，云天明】· 2', '第三部 第四节【广播纪元7年，云天明的童话】· 1',
      '第三部 第四节【广播纪元7年，云天明的童话】· 2', '第三部 第四节【广播纪元7年，云天明的童话】· 3',
      '第三部 第四节【广播纪元7年，云天明的童话】· 4', '第三部 第四节【广播纪元7年，云天明的童话】· 5',
      '第三部 第五节【广播纪元8年，命运的抉择】· 1', '第三部 第五节【广播纪元8年，命运的抉择】· 2',
      '第三部 第六节【广播纪元8年，地日拉格朗日点】', '第四部 第一节【掩体纪元11年，掩体世界】· 1',
      '第四部 第一节【掩体纪元11年，掩体世界】· 2', '第四部 第二节【掩体纪元11年，光速二号】',
      '第四部 第三节【掩体纪元11年，星环城】', '第五部 第一节【掩体纪元67年，银河系猎户旋臂】',
      '第五部 第二节【掩体纪元67年，"星环"号】', '第五部 第三节【掩体纪元66年，太阳系外围】· 1',
      '第五部 第三节【掩体纪元66年，太阳系外围】· 2', '第五部 第四节【掩体纪元67年，冥王星】',
      '第五部 第五节【掩体纪元67年，二维太阳系】· 1', '第五部 第五节【掩体纪元67年，二维太阳系】· 2',
      '第六部 第一节【银河纪元409年，我们的星星】· 1', '第六部 第一节【银河纪元409年，我们的星星】· 2',
      '第六部 第二节【时间开始后约170亿年，我们的宇宙】',
      '第六部 第三节【时间之外，我们的宇宙】· 1', '第六部 第三节【时间之外，我们的宇宙】· 2',
      '三体系列时间线'
    ]
  }
]

// 分卷展示，每个卷只显示三个章节
const volumes = reactive([
  {
    title: '三体Ⅰ：地球往事',
    chapters: fullVolumes[0].chapters.slice(0, 3)
  },
  {
    title: '三体Ⅱ：黑暗森林',
    chapters: fullVolumes[1].chapters.slice(0, 3)
  },
  {
    title: '三体Ⅲ：死神永生',
    chapters: fullVolumes[2].chapters.slice(0, 3)
  }
])

const isVolumeOpen = ref([false, false, false])

const toggleVolume = (index) => {
  isVolumeOpen.value[index] = !isVolumeOpen.value[index]
}

// 章节选择逻辑
const selectChapter = (volumeIndex, chapterIndex) => {
  console.log(`选中第${volumeIndex + 1}卷 第${chapterIndex + 1}章`)
}

// 生成章节的路由地址
const getChapterRoute = (chapterNumber) => {
  return `/book01/santi-book${chapterNumber.toString().padStart(2, '0')}`
}
</script>

<style lang="scss" scoped>
.main-container {
  display: flex;
  padding: 0;
  height: 100vh;
}

/* 侧边栏样式 */
.sidebar {
  width: 280px;
  background: #f8f9fa;
  border-right: 1px solid #e9ecef;
  padding: 2rem 1.5rem;
  overflow-y: auto;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
  z-index: 100;
  position: fixed;
  height: 100%;
  top: 0;
  left: 0;

  h2 {
    color: #34495e;
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
    border-bottom: 2px solid #ecf0f1;
    padding-bottom: 0.5rem;
  }

  .volume-sidebar {
    margin-bottom: 1.5rem;
  }

  .volume-title-sidebar {
    color: #16a085;
    margin-bottom: 0.5rem;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .toggle-icon {
      transition: transform 0.3s;
      font-size: 0.8rem;
    }

    .toggle-icon.active {
      transform: rotate(180deg);
    }
  }

  .chapter-list-sidebar {
    list-style: none;
    padding: 0;
    margin-left: 1rem;

    .chapter-item-sidebar {
      padding: 0.4rem 0;
      margin: 0.3rem 0;
      cursor: pointer;
      transition: all 0.2s;
      font-size: 0.95rem;
      color: #666;

      a {
        text-decoration: none;
        color: inherit;
        transition: color 0.2s;
      }

      &:hover {
        color: #27ae60;
      }
    }
  }
}

/* 主内容区调整 */
.book-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem 2rem 2rem 320px;
  font-family: 'Segoe UI', '思源宋体', sans-serif;
  color: #333;
  position: relative;
}

/* 已有的样式保持不变 */
.back-button {
  position: absolute;
  top: 20px;
  left: 100px;
  padding: 8px 16px;
  background: #f1f2f6;
  border: 1px solid #dcdde1;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  z-index: 10;

  &:hover {
    background: #dfe4ea;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
}

.book-cover {
  text-align: center;
  margin-bottom: 2rem;

  .cover-image {
    max-height: 400px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
  }
}

.book-info {
  text-align: center;
  margin-bottom: 3rem;

  .title {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 1rem;
  }

  .metadata {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.6;
  }
}

.synopsis {
  margin-bottom: 3rem;

  h2 {
    color: #34495e;
    border-bottom: 2px solid #ecf0f1;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
  }

  .description {
    line-height: 1.8;
    text-indent: 2em;
  }
}

.volumes {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  .volume-card {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    transition: transform 0.3s ease;

    &:hover {
      transform: translateY(-5px);
    }

    .volume-title {
      color: #16a085;
      margin-bottom: 1rem;
    }

    .chapter-list {
      list-style: none;
      padding: 0;

      .chapter-item {
        padding: 0.5rem;
        margin: 0.3rem 0;
        cursor: pointer;
        transition: all 0.2s;
        border-radius: 4px;

        &:hover {
          background: #e8f6f3;
          color: #27ae60;
        }
      }
    }
  }
}

.action-buttons {
  text-align: center;
  margin-top: 3rem;

  .purchase-btn {
    background: #e74c3c;
    color: white;
    padding: 1rem 3rem;
    border: none;
    border-radius: 25px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.3s;

    &:hover {
      background: #c0392b;
    }
  }
}

/* 响应式调整 */
@media (max-width: 992px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  .sidebar.active {
    transform: translateX(0);
  }

  .book-container {
    padding-left: 2rem;
  }

  .back-button {
    left: 5px;
  }
}
</style>